<template>
  <view class="car-selector">
    <!-- 头部 -->
    <!-- <view class="header">
      <view class="header-left" @click="handleBack">
        <text class="icon">×</text>
      </view>
      <view class="header-center">
        <text class="title">{{ title }}</text>
      </view>
      <view class="header-right">
        <text class="icon">⋯</text>
      </view>
    </view> -->

    <!-- 主标题和清除按钮 -->
    <view class="main-title" v-if="false">
      <text class="title-text">{{ currentMainTitle }}</text>
      <view class="clear-btn" @click="handleClear" v-if="showClear">
        <text class="clear-icon">×</text>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input 
          class="input" 
          :placeholder="currentSearchPlaceholder" 
          v-model="searchKeyword"
          @input="handleSearch"
        />
        <text class="clear-search" @click="clearSearch" v-if="searchKeyword">×</text>
      </view>
      <!-- 搜索结果统计 -->
      <view class="search-result-info" v-if="searchKeyword && !loading">
        <text class="result-text">
          {{ getSearchResultText() }}
        </text>
      </view>
      
      <!-- 搜索建议 -->
      <view class="search-suggestions" v-if="false">
        <view 
          class="suggestion-item" 
          v-for="suggestion in searchSuggestions" 
          :key="suggestion"
          @click="selectSuggestion(suggestion)"
        >
          <text class="suggestion-text" v-html="highlightKeyword(suggestion)"></text>
        </view>
      </view>
    </view>

    <!-- 品牌列表 -->
    <scroll-view 
      class="brand-list" 
      v-if="type === 'brand'"
      scroll-y="true"
      :scroll-into-view="scrollIntoView"
      @scroll="handleScroll"
      @scrolltolower="loadMore"
    >
      <view 
        class="brand-section" 
        v-for="(section, letter) in filteredBrands" 
        :key="letter"
        :id="`section-${letter}`"
      >
        <view class="section-header">
          <text class="section-letter">{{ section.letter }}</text>
        </view>
        <view 
          class="brand-item" 
          v-for="brand in section.list" 
          :key="brand.id"
          @click="selectBrand(brand)"
        >
          <image 
            class="brand-logo" 
            :src="getImageUrl(brand.logo)"
            v-if="brand.logo"
            mode="aspectFit"  
            @error="handleImageError"
          />
          <view class="brand-logo-placeholder" v-else>
            <text class="placeholder-text">{{ brand.name }}</text>
          </view>
                     <text class="brand-name" v-html="highlightKeyword(brand.name)"></text>
                 </view>
       </view>
       
       <!-- 加载更多 -->
       <view class="loading-more" v-if="loading">
         <text class="loading-text">加载中...</text>
       </view>
       
       <!-- 搜索无结果 -->
       <view class="empty-search" v-if="searchKeyword && !loading && Object.keys(filteredBrands).length === 0">
         <text class="empty-text">未找到相关品牌</text>
         <text class="empty-tip">请尝试其他关键词</text>
       </view>
     </scroll-view>

    <!-- 车型列表 -->
    <scroll-view 
      class="series-list" 
      v-if="type === 'series'"
      scroll-y="true"
      @scrolltolower="loadMore"
    >
      <view 
        class="series-item" 
        v-for="(series, index) in filteredSeries" 
        :key="series.id"
        @click="selectSeries(series)"
      >
        <text class="series-name" v-html="highlightKeyword(series.name)"></text>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading-more" v-if="loading">
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 搜索无结果 -->
      <view class="empty-search" v-if="searchKeyword && !loading && filteredSeries.length === 0">
        <text class="empty-text">未找到相关车型</text>
        <text class="empty-tip">请尝试其他关键词</text>
      </view>
    </scroll-view>

    <!-- 字母索引 -->
    <view class="alphabet-index" v-if="type === 'brand' && showAlphabetIndex && !searchKeyword">
      <view 
        class="index-item" 
        v-for="letter in alphabetList" 
        :key="letter"
        @click="scrollToLetter(letter)"
        :class="{ 'active': currentLetter === letter }"
      >
        <text class="index-text">{{ letter }}</text>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: 'CarSelector',
  props: {
    // 选择类型：brand-品牌，series-车型
    type: {
      type: String,
      default: 'brand',
      validator: value => ['brand', 'series'].includes(value)
    },
    // 品牌ID（选择车型时需要）
    brandId: {
      type: [String, Number],
      default: null
    },
    // 标题
    title: {
      type: String,
      default: '马上拼车'
    },
    // 主标题
    mainTitle: {
      type: String,
      default: '请选择品牌'
    },
    // 搜索占位符
    searchPlaceholder: {
      type: String,
      default: '搜索品牌'
    },
    // 是否显示字母索引
    showAlphabetIndex: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      brands: {}, // 品牌列表 - 改为空对象
      series: [], // 车型列表
      searchKeyword: '', // 搜索关键词
      loading: false,
      currentPage: 1,
      pageSize: 20,
      hasMore: true,
      scrollIntoView: '',
      currentLetter: 'A',
      currentMainTitle: this.mainTitle, // 使用data属性存储主标题
      currentSearchPlaceholder: this.searchPlaceholder // 使用data属性存储搜索占位符
    }
  },
  computed: {
    filteredBrands() {
      if (!this.brands || typeof this.brands !== 'object') {
        return {}
      }
      
      if (!this.searchKeyword.trim()) {
        return this.brands
      }
      
      const keyword = this.searchKeyword.trim().toLowerCase()
      const filtered = {}
      
      // 遍历所有字母分组
      Object.keys(this.brands).forEach(letter => {
        const section = this.brands[letter]
        if (!section || !section.list || !Array.isArray(section.list)) {
          return
        }
        
        // 过滤当前字母分组中的品牌
        const filteredList = section.list.filter(brand => {
          if (!brand || !brand.name) return false
          
          // 支持品牌名称搜索
          const brandName = brand.name.toLowerCase()
          if (brandName.includes(keyword)) {
            return true
          }
          
          // 支持品牌拼音搜索（如果有拼音字段）
          if (brand.pinyin) {
            const pinyin = brand.pinyin.toLowerCase()
            if (pinyin.includes(keyword)) {
              return true
            }
          }
          
          // 支持品牌首字母搜索
          if (brand.firstletter) {
            const firstLetter = brand.firstletter.toLowerCase()
            if (firstLetter.includes(keyword)) {
              return true
            }
          }
          
          return false
        })
        
        // 如果当前字母分组有搜索结果，添加到过滤结果中
        if (filteredList.length > 0) {
          filtered[letter] = {
            letter: section.letter,
            list: filteredList
          }
        }
      })
      
      return filtered
    },
    filteredSeries() {
      if (!Array.isArray(this.series)) {
        return []
      }
      
      if (!this.searchKeyword.trim()) {
        return this.series
      }
      
      const keyword = this.searchKeyword.trim().toLowerCase()
      
      return this.series.filter(series => {
        if (!series || !series.name) {
          return false
        }
        
        // 支持车型名称搜索
        const seriesName = series.name.toLowerCase()
        if (seriesName.includes(keyword)) {
          return true
        }
        
        // 支持车型拼音搜索（如果有拼音字段）
        if (series.pinyin) {
          const pinyin = series.pinyin.toLowerCase()
          if (pinyin.includes(keyword)) {
            return true
          }
        }
        
        // 支持车型首字母搜索
        if (series.firstletter) {
          const firstLetter = series.firstletter.toLowerCase()
          if (firstLetter.includes(keyword)) {
            return true
          }
        }
        
        return false
      })
    },
    // 是否显示清除按钮
    showClear() {
      if (this.type !== 'brand') return false
      
      // 检查品牌数据是否存在且有内容
      if (!this.brands || typeof this.brands !== 'object') return false
      
      // 计算所有品牌的总数
      let totalBrandCount = 0
      Object.keys(this.brands).forEach(letter => {
        const section = this.brands[letter]
        if (section && section.list && Array.isArray(section.list)) {
          totalBrandCount += section.list.length
        }
      })
      
      return totalBrandCount > 0
    },
    // 字母列表
    alphabetList() {
      // 只显示在数据中存在的字母
      const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      const sections = this.filteredBrands
      
      if (sections && typeof sections === 'object') {
        return letters.filter(letter => sections[letter] && sections[letter].list && sections[letter].list.length > 0)
      }
      
      return letters
    },
    // 搜索建议
    searchSuggestions() {
      if (!this.searchKeyword.trim() || this.searchKeyword.trim().length < 2) {
        return []
      }
      
      const keyword = this.searchKeyword.trim().toLowerCase()
      const suggestions = []
      const seen = new Set()
      
      // 从品牌数据中提取建议
      Object.keys(this.brands).forEach(letter => {
        const section = this.brands[letter]
        if (section && section.list) {
          section.list.forEach(brand => {
            if (brand && brand.name) {
              const brandName = brand.name.toLowerCase()
              if (brandName.includes(keyword) && !seen.has(brand.name)) {
                suggestions.push(brand.name)
                seen.add(brand.name)
              }
            }
          })
        }
      })
      
      // 限制建议数量
      return suggestions.slice(0, 5)
    },
  },
  watch: {
    type: {
      handler(newType) {
        this.updateMainTitle()
        this.updateSearchPlaceholder()
        this.loadData()
      },
      immediate: true
    },
    brandId: {
      handler(newBrandId) {
        if (this.type === 'series' && newBrandId) {
          this.loadSeriesData()
        }
      },
      immediate: true
    },
    mainTitle: {
      handler(newTitle) {
        this.currentMainTitle = newTitle
      },
      immediate: true
    },
    searchPlaceholder: {
      handler(newPlaceholder) {
        this.currentSearchPlaceholder = newPlaceholder
      },
      immediate: true
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 更新主标题
    updateMainTitle() {
      if (this.type === 'brand') {
        this.currentMainTitle = '请选择品牌'
      } else if (this.type === 'series') {
        this.currentMainTitle = '请选择车型'
      }
    },
    // 更新搜索占位符
    updateSearchPlaceholder() {
      if (this.type === 'brand') {
        this.currentSearchPlaceholder = '搜索品牌'
      } else if (this.type === 'series') {
        // 切换到车型搜索时，清空搜索关键词
        if (this.searchKeyword) {
          this.searchKeyword = ''
        }
        this.currentSearchPlaceholder = '搜索车型'
      }
    },
    // 加载数据
    async loadData() {
      if (this.loading) return
      
      this.loading = true
      try {
        if (this.type === 'brand') {
          await this.loadBrandData()
        } else if (this.type === 'series') {
          await this.loadSeriesData()
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    // 加载品牌数据
    async loadBrandData() {
      try {
        const response = await this.$http.get('/h5/car/getCarBrandList')
        
        if (response && response.data) {
          this.brands = response.data
          
        } 
      } catch (error) {
        console.error('获取品牌列表失败:', error)
      }
    },
    // 加载车型数据
    async loadSeriesData() {
      if (!this.brandId) {
        console.warn('品牌ID不能为空')
        return
      }
      
      try {
        const response = await this.$http.get(`/h5/car/getCarSeriesListByBrandId/${this.brandId}`, {
          page: this.currentPage,
          size: this.pageSize
        })
        
        if (response && response.data) {
          const seriesData = Array.isArray(response.data.list) ? response.data.list : []
          
          if (this.currentPage === 1) {
            this.series = seriesData
          } else {
            this.series = [...this.series, ...seriesData]
          }
          
          // 判断是否还有更多数据
          this.hasMore = seriesData.length === this.pageSize
        } else {
          console.error('车型数据响应无效:', response)
        }
      } catch (error) {
        console.error('获取车型列表失败:', error)
      }
    },
    // 搜索处理
    handleSearch() {
      
      if (this.type === 'brand') {
        
        // 搜索时隐藏字母索引
        if (this.searchKeyword.trim()) {
          this.currentLetter = ''
        } else {
          // 清空搜索时，重置到第一个字母
          const letters = Object.keys(this.filteredBrands)
          this.currentLetter = letters.length > 0 ? letters[0] : 'A'
        }
        
        // 清空滚动位置
        this.scrollIntoView = ''
      } else if (this.type === 'series') {
        
      }
    },
    // 清除搜索
    clearSearch() {
      this.searchKeyword = ''
      
      if (this.type === 'brand') {
        // 重置到第一个字母
        const letters = Object.keys(this.filteredBrands)
        this.currentLetter = letters.length > 0 ? letters[0] : 'A'
        // 清空滚动位置
        this.scrollIntoView = ''
      }
    },
    // 选择品牌
    selectBrand(brand) {
      // 添加触觉反馈（如果支持）
      if (uni.vibrateShort) {
        uni.vibrateShort()
      }
      this.$emit('select-brand', brand)
    },
    // 选择车型
    selectSeries(series) {
      
      // 添加触觉反馈（如果支持）
      if (uni.vibrateShort) {
        uni.vibrateShort()
      }
      
      this.$emit('select-series', series)
    },
    // 清除选择
    handleClear() {
      this.$emit('clear')
    },
    // 返回
    handleBack() {
      this.$emit('back')
    },
    // 滚动到指定字母
    scrollToLetter(letter) {
      
      // 添加触觉反馈（如果支持）
      if (uni.vibrateShort) {
        uni.vibrateShort()
      }
      
      // 检查该字母对应的section是否存在
      const sections = this.filteredBrands
      if (!sections || !sections[letter]) {
        console.warn(`字母 ${letter} 对应的section不存在`)
        return
      }
      
      // 检查该section是否有数据
      if (!sections[letter].list || sections[letter].list.length === 0) {
        console.warn(`字母 ${letter} 对应的section没有数据`)
        return
      }
      
      
      // 立即更新当前字母，确保UI立即响应
      this.currentLetter = letter
      
      // 设置滚动目标
      this.scrollIntoView = `section-${letter}`
      
      // 添加延迟确保滚动生效，并防止handleScroll立即覆盖currentLetter
      setTimeout(() => {
        this.scrollIntoView = ''
        // 再次确认当前字母，防止被handleScroll覆盖
        if (this.currentLetter !== letter) {
          this.currentLetter = letter
        }
      }, 300) // 增加延迟时间，确保滚动动画完成
    },
    // 滚动处理
    handleScroll(e) {
      // 根据滚动位置更新当前字母
      const scrollTop = e.detail.scrollTop
      const sections = this.filteredBrands
      
      if (!sections || Object.keys(sections).length === 0) return
      
      // 使用更简单但更可靠的方法
      const letters = Object.keys(sections)
      let visibleLetter = letters[0] // 默认第一个字母
      
      // 计算每个section的大概位置（使用更准确的估算）
      let currentTop = 0
      const sectionPositions = []
      
      letters.forEach(letter => {
        const section = sections[letter]
        if (section && section.list) {
          // 更准确的section高度计算
          const headerHeight = 50 // section header高度
          const itemHeight = 86 // 每个品牌项的高度（包括padding和border）
          const sectionHeight = headerHeight + (section.list.length * itemHeight)
          
          sectionPositions.push({
            letter,
            top: currentTop,
            bottom: currentTop + sectionHeight
          })
          currentTop += sectionHeight
        }
      })
      
      // 找到当前可见的section
      for (let i = sectionPositions.length - 1; i >= 0; i--) {
        const section = sectionPositions[i]
        if (scrollTop >= section.top - 50) { // 添加50px的偏移量，让切换更平滑
          visibleLetter = section.letter
          break
        }
      }
      
      
      // 更新当前字母，但只在滚动位置确实对应到该字母时才更新
      // 这样可以防止在点击字母索引后立即被覆盖
      if (this.currentLetter !== visibleLetter) {
        // 检查滚动位置是否确实对应到计算出的字母
        const targetSection = sectionPositions.find(section => section.letter === visibleLetter)
        if (targetSection) {
          const isInTargetSection = scrollTop >= targetSection.top - 50 && scrollTop < targetSection.bottom + 50
          if (isInTargetSection) {
            this.currentLetter = visibleLetter
          }
        }
      }
    },
    // 加载更多数据
    loadMore() {
      if (this.type === 'series' && this.hasMore && !this.loading) {
        this.currentPage++
        this.loadSeriesData()
      }
    },
    // 处理图片URL
    getImageUrl(url) {
      if (!url) return ''
    
      
      // 如果是完整的URL，直接返回
      if (url.startsWith('http://') || url.startsWith('https://')) {
        return url
      }
      
      // 如果是相对路径，添加基础URL
      if (url.startsWith('/')) {
        return url
      }
      
      // 如果是其他格式，尝试处理
      return url
    },
    // 处理图片加载错误
    handleImageError(e) {
      // 可以在这里设置默认图片
    },
    
    // 获取搜索结果文本
    getSearchResultText() {
      if (this.type === 'brand') {
        // 计算所有搜索结果的总数
        let totalResultCount = 0
        Object.keys(this.filteredBrands).forEach(letter => {
          const section = this.filteredBrands[letter]
          if (section && section.list) {
            totalResultCount += section.list.length
          }
        })
        
        // 计算所有品牌的总数
        let totalBrandCount = 0
        Object.keys(this.brands).forEach(letter => {
          const section = this.brands[letter]
          if (section && section.list) {
            totalBrandCount += section.list.length
          }
        })
        
        return `找到 ${totalResultCount} 个品牌`
      } else if (this.type === 'series') {
        const resultCount = this.filteredSeries.length
        const totalCount = this.series.length
        return `找到 ${resultCount} 个车型`
      }
      return ''
    },
    
    // 高亮搜索关键词
    highlightKeyword(text) {
      if (!text || !this.searchKeyword.trim()) {
        return text
      }
      
      const keyword = this.searchKeyword.trim()
      const regex = new RegExp(`(${keyword})`, 'gi')
      return text.replace(regex, '<span class="highlight">$1</span>')
    },
    
    // 选择搜索建议
    selectSuggestion(suggestion) {
      this.searchKeyword = suggestion
      // 触发搜索
      this.handleSearch()
    }
  }
}
</script>

<style scoped lang="scss">
.car-selector {
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.header-left, .header-right {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-center {
  flex: 1;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.subtitle {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 4rpx;
}

.icon {
  font-size: 40rpx;
  color: #333;
}

/* 主标题样式 */
.main-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.clear-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.clear-btn:active {
  background-color: #e0e0e0;
  transform: scale(0.9);
}

.clear-icon {
  font-size: 28rpx;
  color: #666;
}

/* 搜索框样式 */
.search-bar {
  padding: 20rpx 26rpx;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-radius: 40rpx;
  padding: 16rpx 30rpx;
  transition: all 0.3s ease;
  border: 2rpx solid transparent;
}

.search-input:focus-within {
  background-color: #fff;
  border-color: #FF7937;
  box-shadow: 0 0 0 4rpx rgba(255, 121, 55, 0.1);
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 16rpx;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
}

.clear-search {
  font-size: 32rpx;
  color: #999;
  margin-left: 16rpx;
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 8rpx;
  border-radius: 50%;
}

.clear-search:active {
  background-color: rgba(153, 153, 153, 0.2);
  transform: scale(0.9);
}

/* 搜索结果统计 */
.search-result-info {
  padding: 16rpx 30rpx 0;
}

.result-text {
  font-size: 24rpx;
  color: #666;
}

.highlight {
  background-color: #FF7937;
  color: #fff;
  padding: 2rpx 4rpx;
  border-radius: 4rpx;
}

/* 搜索建议样式 */
.search-suggestions {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 0 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  max-height: 400rpx;
  overflow-y: auto;
}

.suggestion-item {
  padding: 24rpx 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background-color: #f5f5f5;
}

.suggestion-item:active {
  background-color: #e8e8e8;
  transform: scale(0.98);
}

.suggestion-text {
  font-size: 28rpx;
  color: #333;
}

/* 列表样式 */
.brand-list, .series-list {
  flex: 1;
  height: 0;
}

/* 分组标题 */
.section-header {
  padding: 20rpx 30rpx;
  background-color: #f8f8f8;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.section-letter {
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
}

.brand-item, .series-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.brand-item:active, .series-item:active {
  background-color: #f5f5f5;
  transform: scale(0.98);
}

.brand-item::after, .series-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 121, 55, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.brand-item:active::after, .series-item:active::after {
  opacity: 1;
}

.brand-logo {
  width: 96rpx;
  height: 96rpx;
  margin-right: 10px;
  border-radius: 96rpx;
  background-color: #f5f5f5;
  object-fit: contain;
}

.brand-logo-placeholder {
    width: 96rpx;
    height: 96rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-text {
  font-size: 24rpx;
  color: #999;
  font-weight: bold;
}

.brand-name, .series-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

/* 加载更多 */
.loading-more {
  padding: 30rpx;
  text-align: center;
}

.loading-text {
  font-size: 24rpx;
  color: #999;
}

/* 空状态样式 */
.empty-search {
  padding: 120rpx 40rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.empty-tip {
  font-size: 24rpx;
  color: #999;
}

/* 字母索引样式 */
.alphabet-index {
  position: fixed;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  padding: 10rpx 0;
  z-index: 100;
}

.index-item {
  padding: 4rpx 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6rpx;
  margin: 2rpx 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.index-item:active {
  background-color: rgba(255, 121, 55, 0.2);
  transform: scale(0.9);
}



.index-text {
  font-size: 20rpx;
  color: #666;
}

.index-item.active .index-text {
  color: #FF7937;
}
.index-item.active {
  background-color: transparent;
}
</style> 